<style lang="scss" scoped>
	.content {
		padding: 30rpx;
	}

	.list {
		width: 688rpx;
		padding: 25rpx 0;
		opacity: 1;
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
		margin-top: 30rpx;

		.c999 {
			padding-right: 7rpx;
		}

		.h1 {
			border-left: 6rpx solid #409eff;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
		}

		.contains {
			width: 100%;
			padding: 20rpx;
			border-top: 1px solid #eee;

			.text {
				width: 100%;
				line-height: 60rpx;
			}
		}
	}

	.footer {
		height: 160rpx;
		width: 750rpx;
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;

		.btn {
			width: 320rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}
	}
</style>

<template>
	<view class="content">
		<view class="c999 f28">工单号:{{orderNum}}</view>
		<view class="list" v-for="item,index in process" :key="index" v-if="item.currProcess&&item.currProcess!='start'&&item.currProcess!='complete'">
			<view class="f34 bold h1">{{item.currProcess | processState}}</view>
			<view class="contains between-flex">
				<view class="text">
					<view class="between-flex">
						<view style="width:60%;"><span class="c999" style="white-space: nowrap;">时间:</span><span style="white-space: nowrap;">{{item.updateTime?item.updateTime:'无'}}</span></view>
						<view><span class="c999">{{item.currProcess | processPerson}}:</span><span>{{item.updateUser | user}}</span></view>

					</view>
					<view v-if="item.processValueName" class="flex m-top10"><span class="c999" style="line-height: 28rpx;">{{item.currProcess | processStateText}}:</span>
						<view class="" style="width:500rpx;line-height: 30rpx;">{{item.processValueName}}</view>
					</view>
					<view v-if="item.remark" class="flex m-top10"><span class="c999" style="line-height: 28rpx;">{{item.currProcess=='not_complete'?'处理过程':'详细说明'}}:</span>
						<view class="" style="width:500rpx;line-height: 30rpx;">{{item.remark?item.remark:'无'}}</view>
					</view>

					<view class="flex" v-if="item.processEnclosure"><span class="c999">附件:</span>
						<view>
							<view class="align-flex blue p-left10" v-for="item2,index2 in item.processEnclosure" @click="$open(item2.url)" :key="index2">
								<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
								{{item2.name}}
							</view>
						</view>

					</view>
				</view>

			</view>
		</view>
		<view class="list">
			<view class="f34 bold h1">创建工单</view>
			<view class="contains between-flex">
				<view class="text">
					<view class="between-flex">
						<view><span class="c999">建单人:</span><span>{{fault.createUser | user}}</span></view>
						<view style="width:60%;"><span class="c999" style="white-space: nowrap;">建单时间:</span><span style="white-space: nowrap;">{{fault.createTime}}</span></view>
					</view>
					<view class="between-flex">
						<view><span class="c999">来源:</span><span>{{fault.source | source}}</span></view>
						<view style="width:60%;" v-if="fault.reqTime"><span class="c999">预计工时(/小时):</span><span>{{fault.reqTime}}</span>
						</view>
					</view>
					<view><span class="c999">故障分类:</span><span>{{fault.faultType | faultType}}</span></view>
					<view v-if="fault.faultRemark" class="flex m-top10"><span class="c999" style="line-height: 28rpx;">故障描述:</span>
						<view class="" style="width:500rpx;line-height: 30rpx;" v-html="fault.faultRemark">
						</view>
					</view>
					<view v-if="fault.detailInfo" class="flex m-top10"><span class="c999" style="line-height: 28rpx;">详细说明:</span>
						<view class="" style="width:500rpx;line-height: 30rpx;">{{fault.detailInfo}}</view>
					</view>
					<view class="between-flex">
						<view><span class="c999">紧急程度:</span><span>{{fault.degree | degree}}</span></view>
						<view style="width:60%;"><span class="c999">影响范围:</span><span>{{fault.rangeType | rangeType}}</span></view>
					</view>
					<view><span class="c999">响应类型: </span><span>{{fault.responseType | responseType}}</span></view> 
					<view v-if="fault.equipment"><span class="c999">资产名称:</span><span>{{fault.equipment}}</span>
					</view>
					<view v-if="fault.equipment_address "><span class="c999">资产位置:</span><span>{{fault.equipment_address }}</span>
					</view>
					<view class="flex" v-if="fault.enclosure"><span class="c999">附件:</span>
						<view>
							<view class="align-flex blue p-left10" v-for="item,index in fault.enclosure" @click="$open(item.url)">
								<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
								{{item.name.substring(item.name.length-10)}}
							</view>
						</view>

					</view>
				</view>

			</view>
		</view>
		<view class="list" v-if="flag">
			<view class="f34 bold h1">接听信息</view>
			<view class="contains between-flex">
				<view class="text">
					<view class="between-flex">
						<view><span class="c999">接听人:</span><span>{{info.reception | user}}</span></view>
						<view style="width:60%;"><span class="c999">通话时间:</span><span>{{info.time?info.time:'无'}}</span>
						</view>
					</view>
					<view class="between-flex">
						<view><span class="c999">报修人:</span><span> {{info.user || '-'}}</span></view>
						<view style="width:60%;"><span class="c999">报修人电话:</span><span @click.stop="$makephone(info.phone)">{{info.phone || '-'}}</span></view>
					</view>
					<view><span class="c999">报修科室: </span><span>{{info.deptId | subject}}</span></view>
					<view v-if="info.place"><span class="c999">报修地址: </span><span>{{info.place}}</span></view>
					<view class="align-flex" v-if="info.recording"><span class="c999">录音:</span>
						<view class="align-flex blue p-left10" @click="playVoice(info.recording)">
							<u-icon name="play-circle" color="#409EFF" size="38">
							</u-icon>{{info.recording.substring(info.recording.length-10)}}
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="center-flex" style="margin-top: 30rpx;">
			<view @click="flag=!flag" class="align-flex blue">{{flag?'收起':'更多信息'}}
				<view :style="flag?'transform: rotate(-180deg);':'' ">
					<u-icon name="arrow-down" color="#409EFF" size="28"></u-icon>
				</view>
			</view>
		</view>
		<u-popup border-radius="24" mode="bottom" v-model="showPopup" :closeable="true">
			<reject @submit="submit" :orderNum="orderNum"></reject>
		</u-popup>
		<view style="height:200rpx;"></view>
		<view class="footer between-flex" v-if="showbtn">
			<view class="btn bgblue cfff center-flex f32 bold" @click="rejectOrder()">退单</view>
			<view class="btn bgblue cfff center-flex f32 bold" @click="accpetOrder()">接单</view>

		</view>
		<wyb-loading @hide="hide" ref="loading" type="rectangle" title="录音播放中" loading-type="scale-line" />
	</view>
</template>

<script>
	import wybLoading from '@/components/wyb-loading/wyb-loading.vue'
	import reject from '@/components/order/reject.vue'
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		components: {
			reject,
			wybLoading
		},
		data() {
			return {
				showPopup: false,
				showbtn: false,
				head: this.$head,
				flag: true, //查看更多
				orderNum: '',
				info: {},
				fault: {},
				make: {},
				process: [], //流程
			}
		},
		onLoad(e) {
			this.orderNum = e.orderNum
			this.getinfo()
			innerAudioContext.onEnded(() => {
				this.$refs.loading.hideLoading()
			});
		},
		methods: {
			submit() {
				this.showPopup = false;
				this.showbtn = false;
				setTimeout(() => {
					uni.navigateBack({

					})
				}, 1500)
			},
			rejectOrder() {

				this.showPopup = true
			},
			accpetOrder() {

				uni.showModal({
					title: '确认接单吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('订单号', this.orderNum)
							this.$pop.ajaxPost('/wechat/order/receiving', {
								orderNum: this.orderNum
							}).then(res => {
								if (res.code == 0) {
									this.$msg('接单成功')
									this.showbtn = false
								}
							})
						}
					}
				})
			},
			playVoice(src) {
				console.log('播放录音');

				if (src) {
					var a = src.slice(0, 4)
					if (a === 'http') {
						src = src
					} else if (src) {
						src = uni.getStorageSync('imgUrl') + src
					}
					this.$refs.loading.showLoading() // 显示
					innerAudioContext.src = src;
					innerAudioContext.play();
				}
			},
			hide() {
				innerAudioContext.stop();
			},
			getinfo() {
				let self = this
				uni.showLoading({
					title: '加载中...'
				})
				this.$pop.ajaxPost('/busOrderProcess/getListByOrderNum', {
					orderNum: this.orderNum
				}).then(res => {
					if (res.code == 0) {
						var list = res.body
						list.forEach(item => {
							if (item.processEnclosure) {
								item.processEnclosure = JSON.parse(item.processEnclosure)
								var list = item.processEnclosure
								list.forEach(item2 => {
									item2.name = item2.name.substring(item2.name.length - 10)
								})
								item.processEnclosure = list
							}

						})
						this.process = list
					}
				})
				uni.hideLoading()
				this.$pop.ajaxPost('/busOrderInfo/getByOrderNum', {
					orderNum: this.orderNum
				}).then(res => {
					if (res.code == 0) {
						this.info = res.body.info || {}
						this.fault = res.body.fault || {}
						this.make = res.body.make || {}
						if (this.fault.enclosure) {
							this.fault.enclosure = JSON.parse(this.fault.enclosure)
						}
						if (this.fault?.currState === 'processing') {
							this.showbtn = false

							uni.showToast({
								title: '该工单已被接单,即将跳转至工单处理',
								icon: 'none',
								complete: () => {
									setTimeout(function() {
										self.$pop.ajaxPost('/busOrderFault/getWechatViewV2', {
											query: '',
											pageNum: 1,
											pageSize: 1,
											currState: '',
											orderNum: self.orderNum
										}).then(res => {
											if (res.code == 0) {
												var list = res.body.list
												let isReview = list.length ? list[0].isReview : false
												self.$navTo(`/pages/myOrder/detail?orderNum=${self.orderNum}&isReview=${isReview}`)
											}
										})

									}, 1000);
								}
							})

							console.log('orderReciving----detail')
						} else {
							uni.hideLoading()
							this.showbtn = true
						}
					}
				})
			}

		}
	}
</script>
